/*
* @Author: zhangqiaojuan
* @Date: 2023-06-10 10:31:19
* @LastEditors: Yejing
* @LastEditTime: 2023-07-04 14:40:57
* @Description: desc
*/
<template>
	<view class="shops-homepage">
		<c-layout @getNewsData="getNewsData">
			<c-navigation-bar search-border="#E1E8E8" :input="input" :is-search="productCardList.length>0?true:false"
				searchBgcolor="" slot="head" navbar-bg-color="#1B1D29" left-icon-color="#fff" @searchEvent="searchEvent">
				<template slot="icon">
					<bubble ref="bubble" :data='bubble.data' @bubbleLineClick='bubbleLineClick'></bubble>
				</template>
			</c-navigation-bar>
			<view class="container-box">
				<shopMessage :shopId="followUrlData.shopId"></shopMessage>
				<view class="categories-group">
					<view class="title">
						<text v-if="productCardList.length<=0"> {{$t('classifySeckill.AllCategories')}} </text>
						<view v-else style="display: flex; align-items: center">
							<u-icon size="60" color="#fff" name="arrow-leftward" @click="backEvent"></u-icon>
							<text style="font-size: 24rpx; margin-left: 30rpx">
								( {{ typeName }} )
							</text>
						</view>
					</view>
					<view v-if="productCardList.length<=0">
						<view v-for="(item,index) in typeList" :key="item.id">
							<view class="categories-item" @click="changeshowChild(index)">
								<view class="left">
									<view class="age-categories">
										{{ item.name }}
									</view>
									<view class="product-categories  u-line-1">
										{{ item.childName }}
									</view>
								</view>
								<view class="right">
									<u-image width="240rpx" height="160rpx" border-radius="30rpx"
										:src="$u.file.getMedieUrl(item.image)"></u-image>
								</view>

							</view>
							<view class="" style="display: flex;" v-show="item.showChild">
								<view v-for="(i,k) in item.twos" :key="i.id" @click="typeListClick(i)" class="twos-item">
									<u-image width="80rpx" height="80rpx" border-radius="8rpx"
										:src="$u.file.getMedieUrl(i.image)"></u-image>
									<view class="" style="width: 100%;text-align: center;font-size: 12px;">
										{{ i.name }}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-else>
						<waterfallView>
							<view class="item" v-for="card in productCardList" :key="card.id">
								<productCard :details="card" type="center"
									@click="$u.route('/pages/productDetails/productDetails',{productId: card.id})"></productCard>
							</view>
						</waterfallView>
					</view>
				</view>
			</view>
			<shopTabbar :shopId="followUrlData.shopId" slot="footer" :current="2"></shopTabbar>
		</c-layout>

	</view>
</template>

<script>
	import bubble from "@/pages/searchInfo/components/bubble.vue"
	import shopMessage from "@/pages/shop/components/shopMessage.vue"
	import shopTabbar from "@/pages/shop/components/tabBar.vue"

	export default {
		components: {
			bubble,
			shopMessage,
			shopTabbar
		},
		data() {
			return {
				//搜索
				search: {
					navType: 'backSearch',
					navPlaceholder: 'Search...',
				},
				//更多
				bubble: {
					data: [{
						text: this.$t('system.share'),
						icon: 'edit-pen',
						url: '/pages/searchInfo/components/anchorCard/anchorHomepage/bubble/edit'
					}, {
						text: this.$t('system.visitor'),
						icon: 'account',
						url: '/pages/searchInfo/components/anchorCard/anchorHomepage/bubble/visitor'
					}]
				},
				//商铺信息
				message: {
					name: 'Meizu',
					image: require("static/images/product.png"),
					isBrand: true,
					brand: "品牌",
					followers: '332.2k'
				},
				productList: [],
				current: 'all',
				followUrlData: {},
				typeList: [],
				productCardList: [],
				paging: {
					size: 6,
					current: 1
				},
				total: 0,
				typeName: '',
				input: {
					value: ''
				}
			}
		},
		onLoad(val) {
			this.followUrlData = val
			this.getAllTypes()
			this.productCardList = []
		},
		methods: {
			//点击更右上角更多图标
			bubbleLineClick(url, index) {
				if (url) {
					uni.navigateTo({
						url: url
					})
				}
				if (index == 3) {
					this.sharePopShow = true
				}
			},
			tabsChange(index) {
				this.type.current = index
			},
			//获取全部分类
			getAllTypes() {
				this.$u.get('/app/shopGoodsInfo/cateTwo/' + this.followUrlData.shopId).then(res => {
					this.typeList = res.data
					this.typeList.forEach(i => {
						i.childName = ''
						i.showChild = false
						i.twos.forEach(j => {
							i.childName += j.name + ','
						})
					})
					console.log(this.typeList)
				})
			},
			//商品返回类型
			backEvent() {
				this.productCardList = []
			},
			// 一级分类点击
			changeshowChild(index) {
				if(this.typeList[index].showChild){
					this.typeList[index].showChild = !this.typeList[index].showChild
					this.$forceUpdate()
				}else{
					this.typeList.forEach(i => {
						i.showChild = false
					
					})
					this.typeList[index].showChild = !this.typeList[index].showChild
					this.$forceUpdate()
				}
				

			},
			//二级类型点击
			typeListClick(item) {
				this.input.value = undefined
				this.typeName = item.name
				this.paging.name = undefined
				this.paging.cateId = item.id
				this.paging.shopId = this.followUrlData.shopId
				this.paging.current = 1
				this.productCardList = []
				this.getProductList(this.paging)
			},
			//搜索
			searchEvent(val) {
				this.productCardList = []
				this.paging.current = 1
				this.paging.name = val
				this.getProductList(this.paging)
			},
			//获取产品列表
			getProductList(paging) {
				this.$u.post('/app/shopGoodsInfo/useraLLpage', paging).then(res => {
					if (res.data.records.length > 0) {
						this.productCardList = [...this.productCardList, ...res.data.records].filter(function(element, index,
							self) {
							return self.findIndex(el => el.id == element.id) === index
						})
					} else {
						this.$u.toast(this.$t('system.NoFurtherDataAvailable'))
						this.productCardList = []
					}
					this.total = res.data.total

				})
			},
			getNewsData() {
				if (this.productCardList.length == this.total) {
					return
				}
				this.paging.current += 1
				this.getProductList(this.paging)
			}

		},
		//离开页面关闭气泡
		onHide() {
			// this.$refs.bubble.moreClick()
		},
	}
</script>

<style lang="scss" scoped>
	.container-box {
		background-image: linear-gradient(#1B1D29 260rpx, #1B1D29 20rpx, #fff, #fff, #fff);

	}

	.categories-group {
		.title {
			font-size: 52rpx;
			color: #FFFFFF;
			padding-bottom: 48rpx;
		}

		.categories-item {
			height: 160rpx;
			background: #F6F9FA;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			display: flex;
			margin-bottom: 30rpx;

		}

		.twos-item {
			width: 80px;
			height: 80px;
			border-radius: 8px;
			background: rgba(246, 249, 250, 1);
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			margin: 0 10rpx 10rpx 0;
		}

		.left {
			padding-left: 40rpx;
			margin-right: auto;
			color: #212121;
			max-width: 420rpx;
		}

		.age-categories {
			font-size: 43rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			padding-top: 40rpx;
		}

		.product-categories {
			max-width: 420rpx;
			font-size: 20rpx;
		}
	}

	/deep/ .u-input__input {
		color: #fff !important;
	}
</style>